<template>
  <div class="learn">
    <header v-if="!isLearningMode" class="page-header">
      <h1>学习中心</h1>
      <p>选择你想学习的数学概念</p>
    </header>

    <!-- 正常选择模式：左右结构 -->
    <div v-if="!isLearningMode" class="learning-content">
      <div class="subject-selector">
        <h2>学习主题</h2>

        <!-- 学段选择器 -->
        <div class="level-selector">
          <h3>选择学段</h3>
          <div class="level-buttons">
            <button
              v-for="level in levels"
              :key="level.id"
              class="level-btn"
              :class="{ active: selectedLevel === level.id }"
              @click="selectLevel(level.id)"
            >
              {{ level.name }}
            </button>
          </div>
        </div>

        <!-- 学习主题列表 -->
        <div v-if="loading" class="loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>

        <div v-else-if="subjects.length === 0" class="no-subjects">
          <p>该学段暂无学习主题</p>
        </div>

        <div v-else class="subject-list">
          <div
            v-for="subject in subjects"
            :key="subject.id"
            class="subject-item"
            :class="{ active: currentSubject === subject.id }"
            @click="selectSubject(subject.id)"
          >
            <div class="subject-icon">{{ subject.icon }}</div>
            <div class="subject-info">
              <h3>{{ subject.name }}</h3>
              <p>{{ subject.description }}</p>
              <div class="subject-meta">
                <span class="difficulty" :class="subject.difficulty">
                  {{ getDifficultyText(subject.difficulty) }}
                </span>
                <span class="time">{{ subject.estimatedTime }}分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="learning-area">
        <div v-if="currentSubject" class="subject-content">
          <h2>{{ getCurrentSubject?.name }}</h2>
          <p>{{ getCurrentSubject?.description }}</p>

          <!-- 这里将来会放置具体的数学可视化组件 -->
          <div class="visualization-placeholder">
            <div class="placeholder-content">
              <div class="placeholder-icon">📊</div>
              <h3>{{ getCurrentSubject?.name }} 可视化</h3>
              <p>这里将显示 {{ getCurrentSubject?.name }} 的交互式可视化内容</p>
              <button class="btn btn-primary" @click="startLearning">开始学习</button>
            </div>
          </div>
        </div>

        <div v-else class="welcome-content">
          <div class="welcome-card">
            <div class="welcome-icon">🎓</div>
            <h2>欢迎来到学习中心</h2>
            <p>请从左侧选择一个学习主题开始你的数学学习之旅</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习模式：只显示可视化内容 -->
    <div v-else class="learning-visualization">
      <!-- 返回按钮 -->
      <div class="back-to-selection">
        <button class="back-btn" @click="exitLearningMode">← 返回主题选择</button>
        <h2>{{ getCurrentSubject?.name }}</h2>
      </div>

      <!-- 可视化内容区域 -->
      <div class="visualization-content">
        <!-- 根据不同主题显示不同的可视化组件 -->
        <NumberLineVisualization v-if="currentSubject === 'number-line'" />
        <FractionVisualization v-else-if="currentSubject === 'fraction'" />
        <GeometryVisualization v-else-if="currentSubject === 'geometry'" />
        <FunctionVisualization v-else-if="currentSubject === 'function'" />

        <!-- 其他主题的占位组件 -->
        <div v-else class="subject-placeholder">
          <div class="placeholder-icon">🚧</div>
          <h3>{{ getCurrentSubject?.name }}</h3>
          <p>该主题的可视化内容正在开发中...</p>
        </div>
      </div>
    </div>

    <!-- 登录提示 -->
    <el-dialog
      v-model="showLoginPrompt"
      title="登录提示"
      align-center
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="login-prompt-content">
        <p>请先登录以开始学习</p>
        <ul class="feature-list">
          <li>获得完整的学习内容</li>
          <li>保存学习进度</li>
          <li>个性化学习推荐</li>
          <li>学习记录和统计</li>
        </ul>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeLoginPrompt">取消</el-button>
          <el-button type="primary" @click="goToLogin">去登录</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  getAllSubjects,
  getAllLevels,
  type Subject,
  type Level,
  type SubjectListData,
} from '@/api/subjects'
import type { ApiResponse } from '@/http'
import { useUserStore } from '@/stores'
import NumberLineVisualization from '@/components/NumberLineVisualization/index.vue'
import FractionVisualization from '@/components/FractionVisualization/index.vue'
import GeometryVisualization from '@/components/GeometryVisualization/index.vue'
import FunctionVisualization from '@/components/FunctionVisualization/index.vue'

/**
 * 学习中心页面组件
 * 功能：
 * 1. 显示不同学段的学习主题
 * 2. 支持按学段筛选主题
 * 3. 展示主题详情和难度信息
 * 4. 提供主题选择和学习入口
 */

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const currentSubject = ref<string>('') // 当前选中的学习主题ID
const subjects = ref<Subject[]>([]) // 学习主题列表
const levels = ref<Level[]>([]) // 学段列表
const selectedLevel = ref<string>('') // 当前选中的学段ID
const loading = ref(false) // 数据加载状态
const showLoginPrompt = ref(false) // 是否显示登录提示
const isLearningMode = ref(false) // 是否处于学习模式

/**
 * 获取学习主题数据
 * 根据选中的学段获取对应的学习主题列表
 * @param level 学段ID，如果不提供则获取所有主题
 */
const fetchSubjects = async (level?: string) => {
  loading.value = true
  try {
    const response = await getAllSubjects(level ? { level } : undefined)
    // 使用类型断言处理API响应（通过 unknown 中间断言，匹配全局 ApiResponse<T> 结构）
    const responseData = response as unknown as ApiResponse<SubjectListData>
    subjects.value = responseData.data?.list || []
  } catch (error) {
    console.error('获取学习主题失败:', error)
    subjects.value = []
  } finally {
    loading.value = false
  }
}

/**
 * 获取所有学段信息
 * 用于显示学段选择器
 */
const fetchLevels = async () => {
  try {
    const response = await getAllLevels()
    // 使用类型断言处理API响应（通过 unknown 中间断言）
    const responseData = response as unknown as ApiResponse<Level[]>
    levels.value = responseData.data || []
  } catch (error) {
    console.error('获取学段信息失败:', error)
    levels.value = []
  }
}

/**
 * 选择学段
 * 当用户点击学段按钮时触发，更新选中的学段并重新获取主题列表
 * @param levelId 选中的学段ID
 */
const selectLevel = (levelId: string) => {
  selectedLevel.value = levelId
  fetchSubjects(levelId)
}

/**
 * 获取难度等级的显示文本
 * 将英文难度等级转换为中文显示
 * @param difficulty 难度等级ID (easy/medium/hard)
 * @returns 中文难度等级名称
 */
const getDifficultyText = (difficulty: string) => {
  const difficultyMap = {
    easy: '简单',
    medium: '中等',
    hard: '困难',
  }
  return difficultyMap[difficulty as keyof typeof difficultyMap] || difficulty
}

/**
 * 计算属性：获取当前选中的主题信息
 * 根据currentSubject的值动态查找对应的主题对象
 */
const getCurrentSubject = computed(() => {
  return subjects.value.find((s) => s.id === currentSubject.value)
})

/**
 * 组件挂载后的初始化逻辑
 * 1. 获取所有学段信息
 * 2. 默认选择第一个学段（通常是小学）
 * 3. 获取该学段的学习主题列表
 */
onMounted(async () => {
  await fetchLevels()
  // 默认选择小学学段
  if (levels.value.length > 0) {
    selectedLevel.value = levels.value[0].id
    await fetchSubjects(selectedLevel.value)
  }
})

/**
 * 选择学习主题
 * 当用户点击主题卡片时触发，更新当前选中的主题
 * @param subjectId 选中的主题ID
 */
const selectSubject = (subjectId: string) => {
  currentSubject.value = subjectId
}

/**
 * 开始学习
 * 当用户点击"开始学习"按钮时触发
 * 切换到学习模式，显示可视化内容
 */
const startLearning = () => {
  // 检查用户登录状态
  if (!userStore.isAuthenticated) {
    // 未登录，显示登录提示
    showLoginPrompt.value = true
    return
  }

  // 已登录，切换到学习模式
  isLearningMode.value = true
}

/**
 * 退出学习模式
 * 返回到主题选择界面
 */
const exitLearningMode = () => {
  isLearningMode.value = false
}

/**
 * 关闭登录提示
 */
const closeLoginPrompt = () => {
  showLoginPrompt.value = false
}

/**
 * 跳转到登录页面
 */
const goToLogin = () => {
  router.push('/login?redirect=' + encodeURIComponent(`/learn/${currentSubject.value}`))
}

/**
 * 从路由参数初始化主题
 * 如果URL中包含subject参数，则自动选中对应的主题
 */
if (route.query.subject) {
  currentSubject.value = route.query.subject as string
}
</script>

<style lang="less" scoped>
@import '@/styles/variables.less';
@import '@/styles/LearnView.less';
</style>
